require('./Fileup.styl');

const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const { corpId } = require(`./../../config/${ENV}.json`);

import {Boxs, Dialog, Field, Icon} from 'saltui';

let HBox = Boxs.HBox;
let Box = Boxs.Box;

const storage = nattyStorage({
  type: 'localStorage',  // 缓存方式, 默认为'localStorage'
  key: 'sskj-dingtalk',     // !!! 唯一必选的参数, 用于内部存储 !!!
  tag: 'v1.0.0.0',          // 缓存的标记, 用于判断是否有效
  duration: 1000 * 60 * 10,      // 缓存的有效期长, 以毫秒数指定
});

class Fileup extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      showConfirm: false,
    }
  }

  onFileSelectClick() {
    if (!this.props.readOnly) {
      Actions.dpAuth(this, this.onFileUp);
    }
  }

  handleConfirm(obj) {
    let t = this;
    Dialog.confirm({
      title: '提示',
      locale: 'zh_cn',
      content: '是否删除附件?',
      onConfirm() {
        t.props.onFileDel(obj);
      },
      onCancel() {
        console.log('confirm cancel');
      }
    });
  }

  onFileUp(obj, t) {
    if (!this.props.readOnly) {
      dd.biz.util.uploadAttachment({
        image: {multiple: true, compress: false, max: 5, spaceId: obj},
        space: {corpId: corpId, spaceId: obj, isCopy: 0, max: 5},
        file: {spaceId: obj, max: 2},
        types: ["photo", "camera", "file", "space"],
        onSuccess: function (result) {
          t.props.onFileSelect({index: t.props.index, files: result.data});
        },
        onFail: function (err) {
          alert('dd error: ' + JSON.stringify(err));
        }
      });
    }
  }


  render() {
    let t = this;
    let fs = [];

    this.props.files.forEach((item, index)=> {
      fs.push(
        <HBox>
          <Box onClick={()=>{

                            dd.biz.cspace.preview({
                                corpId: corpId,
                                spaceId: item.spaceId,
                                fileId: item.fileId,
                                fileName: item.fileName,
                                fileSize: item.fileSize,
                                fileType: item.fileType,
                                onSuccess: function () {
                                    //无，直接在native显示文件详细信息
                                },
                                onFail: function (err) {
                                    // 无，直接在native页面显示具体的错误
                                     alert('dd error: ' + JSON.stringify(err));
                                }
                            });
                        }} flex={1}>
            <div className="filename tLH30">{item.fileName}</div>
          </Box>

          {!this.props.readOnly &&
          <Box onClick={() => {
                            this.handleConfirm({index: this.props.index ,fileIndex:index})

                             }}
               style={{width:'50px',textAlign:'right',marginTop:'8px',marginRight:'10px'}}>
            <Icon name="cross-round" fill="#f04631" height={20}
                  width={20}/></Box>}

        </HBox>
      )
    });


    return (
      <div className="fileup">

        <HBox>
          <Box onClick={this.onFileSelectClick.bind(this)} flex={1}><Field layout="h" label="附件"/></Box>
          {!this.props.readOnly && <Box onClick={this.onFileSelectClick.bind(this)}
                                        style={{width:'50px',textAlign:'right',marginTop:'8px',marginRight:'5px'}}>
            <Icon name="angle-right" fill="#ccc" width={28} height={28}/></Box>
          }
        </HBox>

        {fs}
        <Dialog title="Absolute Confirm"
                show={this.state.showConfirm}
                type="confirm"
                locale={'zh_US'}
                onConfirm={() => {this.setState({showConfirm: false})}}
                onCancel={() => {this.setState({showConfirm: false})}}>
          <textarea value={this.state.text} onChange={e => this.setState({ text: e.target.value })}/>
        </Dialog>
      </div>
    );
  }
}

Fileup.contextTypes = {
  files: React.PropTypes.array,
  readOnly: React.PropTypes.bool,
  onFileSelect: React.PropTypes.func,
  onFileDel: React.PropTypes.func,
  index: React.PropTypes.object,
};

reactMixin.onClass(Fileup, Reflux.connect(Store));

module.exports = Fileup;
